<app-header-bar></app-header-bar>
<app-loader [loading]="loading">
  <app-panel class="app-panel--container">
    <section class="deployments">
      <header class="deployments__header">
        <div class="deployments__header__block">
          <h1 class="deployments__header__title">
            Deployments
            <div class="deployments__header__filters" (click)="filtersOpen = !filtersOpen">
              <mat-icon *ngIf="filtersOpen" svgIcon="close"></mat-icon>
              <mat-icon *ngIf="!filtersOpen" svgIcon="menu"></mat-icon>
              Filters
            </div>
          </h1>
        </div>
        <div class="deployments__header__block deployments__header__new">
          <a routerLink="/charts" href="/charts" mat-button mat-raised-button color="accent">
            New deployment
          </a>
        </div>
      </header>
      <div class="deployments__gallery">

        <app-list-filters [filters]="filters" [class.open]="filtersOpen"></app-list-filters>
        <div class="deployments__gallery__content">
          <div class="deployments__gallery__content__topbar">
            <mat-icon svgIcon="search"></mat-icon>
            <input type="text" placeholder="Search deployment..." (keyup)="searchChange($event)" />
          </div>
          <div class="deployments__gallery__content__list">
            <h3 *ngIf="!visibleDeployments.length" class="deployments__gallery__content__list__empty">There are no deployments</h3>
            <app-deployment-item *ngFor="let deployment of visibleDeployments" [deployment]=deployment></app-deployment-item>
          </div>
        </div>
      </div>
    </section>
  </app-panel>
</app-loader>
